import Icon from "@ui/RJMart/icons";
import EventApi from "@module/EventApi";
import ZenModal from "@module/../components/ZenUI/ZenModal/ZenModal";
import urlHook from "@page/common/utils/urlHook";


import "./style.scss";
export default function ZDControls(props) {
    //定义全局变量 const [scope值，更新方法] = React.useState({初始化的值});
    const [currentDate, updateCurrentDate] = React.useState({
        categoryList: [],
        isShow: false,
        selectName: "",
        selectId: props.defaultId || ""
    });

    const { categoryList } = props;
    //生命周期 页面渲染完后再执行，每次刷新前也执行
    React.useEffect(() => {
        categoryDirectory();
    }, []);

    function categoryDirectory() {
        if (props.categoryList) {
            let selectObj =
                props.categoryList.filter((value, index) => {
                    return props.defaultId == value.id;
                }) || [];

            _updateData({
                categoryList: props.categoryList,
                selectName:
                    selectObj[0] && `${selectObj[0].code}${selectObj[0].name}`,
                selectId: selectObj[0] && selectObj[0].id
            });
        }
    }

    //更新视图数据 私有的方法前缀用_
    function _updateData(value) {
        console.log(value);
        let newValue = { ...currentDate, ...value };
        updateCurrentDate(newValue);
    }

    //输入筛选
    function handleChange(event) {
        let tmplArr = categoryList.filter((v, i) => {
            return (
                v.name.indexOf(event.target.value) > -1 ||
                v.code.indexOf(event.target.value) > -1
            );
        });
        _updateData({ categoryList: tmplArr, selectName: event.target.value });
    }

    function handleClick(val) {
        showModal(val);
    }

    function hideControlsSelect(e) {
        
        if (!e || e.target.id != "controlsSelect") {
            _updateData({
                isShow: false
            });
        }
    }


    //切换政府采购目录
    function showModal(val) {
        function closeModal(value) {
            console.log("run closeModal", value);
            if (value) {
                EventApi.emit("getCategoryDirectory", {
                    productId: props.sn,
                    directoryId: val.id
                });
                _updateData({
                    selectName: `${val.code}${val.name}`,
                    selectId: val.id,
                    isShow: false
                });
            }
            modal.hide();
        }

        function Content(props) {
            props.item.passParams && props.item.passParams("abc");
            return (
                <div className="zen_fs-14 zen_h-150">
                    <div className="zen_t-c zen_l-h-28 zen_m-h-20 zen_m-v-20">
                        学校对于同一年度同一经费同一品目的实验材料分散采购限额标准为20万，请慎用修改管控品目功能，如发现拆标采购，风险将由用户自行承担。
                    </div>
                </div>
            );
        }
        let options = {
            header: "风险提示",
            modalClass: "zen_bdr-5 zen_h-230",
            content: Content,
            size: "sm",
            cbList: [closeModal],
            close: closeModal
        };
        let modal = ZenModal.loadModal(options);
        modal.show();
    }

    return (
        <div className="zen_m-t-10 zen_p-b-15 zen_bdb-D1D1D1 rj_zd-controls-wp">
            <span className="zen_m-r-20 zen_fs-12 zen_h-32 zen_l-h-32">
                政府采购品目
            </span>
            <div className="h-select-select-container h-select-active">
                <div className="h-input-root h-input-root-normal">
                    <div
                        className="h-input-container h-input-suffix"
                        onClick={e => {
                            _updateData({
                                isShow: true
                            });
                        }}
                    >
                        <input
                            id=""
                            type="normal"
                            className="h-input-input"
                            placeholder="请选择"
                            onChange={e => {
                                handleChange(e);
                            }}
                            value={currentDate.selectName}
                        />
                        <span className="h-input-suffix-item zen_cur-p">
                            <i className="h-input-suffix-icon" />
                            <Icon
                                type={"down"}
                                size="small"
                                className="h-select-arrow"
                            />
                        </span>
                    </div>
                </div>

                {currentDate.isShow && currentDate.categoryList && (
                    <div>
                        <div className="zen_ps-fix zen_t-0 zen_b-0 zen_l-0 zen_r-0 zen zen_z-i-99 zen_opa0" onClick={e => {
                            _updateData({
                                isShow: false
                            });
                        }}></div>

                        <ul className="h-select-list zen_scroll-y-n zen_z-i-999">
                            {currentDate.categoryList.map((val, index) => {
                                return (
                                    <li
                                        key={Math.random().toString()}
                                        onClick={e => {
                                            handleClick(val);
                                        }}
                                        className={Uts.sc([
                                            "h-select-option zen_cur-p",
                                            currentDate.selectId == val.id
                                                ? "h-select-selected"
                                                : ""
                                        ])}
                                    >
                                        {`${val.code}${val.name}`}
                                    </li>
                                );
                            })}
                        </ul>
                    </div>
                )}
            </div>

            <span
                className="zen_m-l-20 zen_0093EB zen_fs-12 zen_cur-p zen_h-32 zen_l-h-32"
                onClick={e => {
                    window.open(urlHook.controls, "_blank");
                }}
            >
                政府品目表
            </span>
        </div>
    );
}
